<template>
    <div>
        <div class="detail-food">
            <div class="food-img">
                <img :src="commodityData.commodity_image" alt="">
            </div>
            <div class="return" @click="goback">
                <van-icon name="arrow-left" />
            </div>
            <div class="food-name">
                <span>{{ commodityData.commodity_title }}</span>
                <div class="commodity-detail">
                    <div class="commodity-price">
                        <span class="price-true">¥{{ commodityData.price }}</span>
                        <span class="price-false">¥{{ commodityData.lastprice }}</span>
                    </div>
                    <div class="commodity-amount">
                        <span>月销量：{{ commodityData.sell }}</span>
                    </div>
                    <div class="commodity-location">
                        <span>发货省份:{{ commodityData.addr }}</span>
                    </div>
                </div>
            </div>
            <div class="introduce">
                <p>
                    {{ commodityData.describe }}
                </p>
            </div>
            <van-notice-bar left-icon="volume-o" text="这个商品真的巨赞，你不买你后悔一辈子，快来买吧，快来买吧" />
        </div>
        <div class="commit-footer">
            <van-action-bar>
                <van-action-bar-icon icon="chat-o" text="客服" />
                <van-action-bar-icon icon="cart-o" text="购物车" badge="" />
                <van-action-bar-icon icon="shop-o" text="店铺" badge="" />
                <van-action-bar-button type="warning" text="加入购物车" />
                <van-action-bar-button type="danger" text="立即购买" />
            </van-action-bar>

        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import http from '../tools/axios';
import { useRouter } from 'vue-router';
const router = useRouter();

const commodityData = ref(
    {   addr: "湖南",commodity_id: 1,commodity_image:"http://t15.baidu.com/it/u=4030857494,3285340562&fm=224&app=112&f=JPEG?w=500&h=500",
        commodity_title:"豆瓣酱",create_time:"2023-09-15",describe:"自制健康低脂豆瓣酱",lastprice:38,price:28, sell:"1200"
    }
);
const currentUrl = window.location.href;
const commodity_id = currentUrl.substring(currentUrl.lastIndexOf('/') + 1);
console.log(commodity_id);
const getCommodity = (commodity_id) => {
    http.get('/commodity/info', { params: { 'commodity_id': commodity_id } })
        .then((res) => {
            console.log(res);
            if (res.data.code === 200) {
                commodityData.value = res.data.data[0];
                console.log(commodityData.value);
            } else {
                console.log('error');
            }

        })
}
getCommodity(commodity_id);

const isInShoppingList = ref(false);
const togglePurchaseList = () => {
    isInShoppingList.value = !(isInShoppingList.value)
}
const goback = () => {
    router.go(-1);
}

</script>

<style lang="scss">
.detail-food {
    position: relative;

    .food-img {
        overflow: hidden;
        width: 375px;
        height: 250px;
        margin-top: -9px;
        margin-left: -8px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .return {
        z-index: 20;
        position: absolute;
        top: 10px;
        left: 10px;
        color: azure;
        transform: scale(2);

        .van-icon {
            top: 10px;
            left: 5px;
        }
    }

    .food-name {
        margin-top: 10px;
        margin-left: 5px;

        span {
            font-size: 20px;
            font-weight: 500;
        }

        .commodity-detail {
            display: flex;
            align-items: center;
            margin-top: 10px;

            .commodity-price {
                .price-true {
                    font-size: 15px;
                    color: red;
                }

                .price-false {
                    font-size: 12px;
                    font-weight: 300;
                    text-decoration: line-through;
                    color: black
                }
            }

            .commodity-amount {
                margin-left: 10px;

                span {
                    font-size: 15px;
                    font-weight: 350;
                }
            }

            .commodity-location {
                margin-left: 84px;

                span {
                    font-size: 16px;
                    font-weight: 400;
                }
            }
        }


    }

    .introduce {
        margin: 5px;

        p {
            line-height: 38px;
        }
    }
}
</style>